<template>
  <div class="songdetail">
    <div
      class="bg_img"
      ref="bg"
      :style="{
        backgroundImage: 'url(' + al.picUrl + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover',
        backgroundPosition: '50% 0',
      }"
    ></div>
    <!-- 歌曲图片 -->
    <div class="cont">
      <audio id="audio" :src="songUrl" autoplay muted loop></audio>
      <div class="img">
        <img id="img" :src="al.picUrl" alt="" />
      </div>
    </div>
    <!-- 歌曲名及作者 -->
    <!-- <div class="songname">
      <h2>{{ al.name }}</h2>
    </div> -->
    <!-- 歌词滚动 -->
    <div class="lyricList">
      <ul ref="ul">
        <li
          v-for="(item, key, index) in lrcData"
          :key="index"
          :class="{
            active:
              currentTime > allKeys[index] && currentTime < allKeys[index + 1],
          }"
        >
          {{ item }}{{ scrollLRC(index) }}
        </li>
      </ul>
    </div>
    <!-- 滑动条 -->
    <div class="slider">
      <span>{{ currentTime | time }}</span>

      <van-slider
        button-size="13"
        v-model="value"
        bar-height="2.4px"
        active-color="#ee0a24"
        @change="onChange"
      />

      <span>{{ duration | time }}</span>
    </div>
    <div class="controls">
      <div class="foot">
        <span>
          <van-icon name="arrow-left" />
        </span>
        <span>
          <!-- {{controlsDom.paused}} -->
          <van-icon :name="flag ? 'pause' : 'play'" @click="toggle" />
          <!-- <van-icon v-if="controlsDom.paused" name="pause" /> -->
        </span>
        <span>
          <van-icon name="arrow" />
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { getdetail, getlyric, getsongUrl } from "../../api/songdetail";
export default {
  name: "songdetail",
  data() {
    return {
      id: "",
      //歌曲详情
      songObj: {},
      //歌曲背景图
      al: {},
      //全部时间节点
      allKeys: [],
      //歌词
      lrcData: "",
      // 暂存server返回的数据
      Mylyric: [],
      //歌曲url
      songUrl: "",
      //  获取控件dom元素
      controlsDom: "",
      //  获取转动图片dom元素
      rotateDom: "",
      //  控制播放和暂停
      flag: true,
      //  设置初始角度
      rotateDeg: 0,
      //  保存旋转动画定时器
      timer: "",
      //  拖拽条初始值
      value: 0,
      //  总时长
      duration: 0,
      //  现在播放时长
      currentTime: 0,
    };
  },
  props: [],
  components: {},
  computed: {},
  watch: {},
  created() {
    //  获取路由传来的id
    this.id = this.$route.params.id;
    // console.log(this.id);
    // 歌曲详情
    this.songdetail(this.id);
    // 歌词
    this.lyric(this.id);
    //url
    this.songurl(this.id);
    // 全局事件总线
    this.$bus.$emit("settitle", this.$route.meta.title);
  },
  //  组件激活
  activated() {
    // 全局事件总线
    this.$bus.$emit("settitle", this.$route.meta.title);
    // this.flag = false;
  },
  mounted() {
    // 自适应高度
    // console.log(window.screen.availHeight);
    this.$refs.bg.style.height = window.screen.availHeight - 46 + "px";
    //  获取控件dom元素
    this.controlsDom = document.querySelector("#audio");
    // console.log(this.controlsDom.paused);
    //  获取转动图片dom元素
    this.rotateDom = document.querySelector("#img");
    // console.log(this.rotateDom);
    this.timer = setInterval(() => {
      this.rotateDeg += 0.09;
      this.rotateDom.style.transform = "rotate(" + this.rotateDeg + "deg)";
    }, 0);

    this.EventHandle();

    // this.controlsDom.load()
    setTimeout(() => {
      this.controlsDom.play();
    }, 100);
  },
  //  过滤器
  filters: {
    time(val) {
      // console.log(val);
      if (!val) {
        return "00:00";
      }
      if (Math.round(val) / 60 < 10) {
        if (Math.round(val) % 60 < 10) {
          return (
            "0" + parseInt(Math.round(val) / 60) + ":0" + (Math.round(val) % 60)
          );
        } else {
          return (
            "0" + parseInt(Math.round(val) / 60) + ":" + (Math.round(val) % 60)
          );
        }
      } else {
        if (Math.round(val) % 60 < 10) {
          return parseInt(Math.round(val) / 60) + ":0" + (Math.round(val) % 60);
        } else {
          return parseInt(Math.round(val) / 60) + ":" + (Math.round(val) % 60);
        }
      }
    },
  },
  methods: {
    //  获取歌曲信息
    async songdetail(id) {
      let res = await getdetail(id);
      // console.log(res.songs[0]);
      this.songObj = res.songs[0];
      this.al = this.songObj.al;
      // console.log(this.songObj);
    },
    //  获取歌曲url
    async songurl(id) {
      let res = await getsongUrl(id);
      // console.log(res.data[0].url);
      this.songUrl = res.data[0].url;
    },
    //  获取歌词
    async lyric(id) {
      let res = await getlyric(id);
      // console.log(res.lrc.lyric);
      this.Mylyric = res.lrc.lyric;
      // console.log(this.Mylyric);
      this.filterLrc(this.Mylyric);
    },
    //  拆分歌词
    filterLrc(val) {
      if (!val) return;
      var lrc = {};
      let lyrics = val.split("\n");
      // console.log(lrc,lyrics);
      let reg = /\[\d*:\d*(\.|:)\d*]/g;
      for (var i = 0; i < lyrics.length; i++) {
        //  取出每一句歌词对应的时间
        var timeRegArr = lyrics[i].match(reg);
        if (!timeRegArr) continue;
        // console.log(timeRegArr);
        //    取出歌词
        var content = lyrics[i].replace(timeRegArr, "");
        // console.log(content);
        var t = timeRegArr[0];
        var min = parseInt(t.match(/\[\d*/i).toString().slice(1));
        var sec = parseInt(t.match(/:\d*/i).toString().slice(1));
        var time = min * 60 + sec;
        //   总时间/分钟/秒 /分钟与秒加一起的总秒数
        // console.log(t,min,sec,time);
        //  将秒数与歌词对应在一起
        lrc[time] = content;
        // console.log(lrc);
      }
      //歌词存入state里
      this.lrcData = lrc;
      // console.log(this.lrcData);
      this.getAllkeys(lrc);
    },

    //  获取全部时间节点
    getAllkeys(lrcArr) {
      for (var key in lrcArr) {
        this.allKeys.push(key);
      }
      // console.log(this.allKeys);
    },
    //  切换播放状态
    toggle() {
      // console.log(this.controlsDom.paused);
      //  开始
      if (this.controlsDom.paused) {
        this.controlsDom.play();
        this.flag = !this.flag;
        //  动画
        this.timer = setInterval(() => {
          this.rotateDeg += 0.1;
          this.rotateDom.style.transform = "rotate(" + this.rotateDeg + "deg)";
        }, 80);
      } else {
        this.controlsDom.pause();
        this.flag = !this.flag;
        //  清除动画
        clearInterval(this.timer);
      }
    },
    //  监听播放时间
    // 获取总时长
    EventHandle() {
      this.controlsDom.addEventListener("timeupdate", () => {
        // console.log(this.controlsDom.currentTime);
        // console.log(this.controlsDom.duration);
        this.duration = this.controlsDom.duration;
        this.currentTime = this.controlsDom.currentTime;
        this.value =
          (this.controlsDom.currentTime / this.controlsDom.duration) * 100;
      });
    },
    //  滑块拖拽事件
    onChange(value) {
      console.log(value);
      this.controlsDom.currentTime = (value / 100) * this.duration;
    },
    //  控制歌词滚动
    scrollLRC(index) {
      if (
        this.currentTime > this.allKeys[index] &&
        this.currentTime < this.allKeys[index + 1]
      ) {
        this.$refs.ul.style.top = -(21 * (index - 3)) + "px";
      }
    },
  },
  //  销毁前
  beforeDestroy() {
    //  清除动画定时器
    clearInterval(this.timer);
  },
};
</script>

<style scoped>
.bg_img {
  width: 100%;
  height: 500px;
  filter: blur(50px);
  opacity: 0.9;
}
.cont {
  position: absolute;
  top: 16%;
  width: 100%;
}
.cont .img {
  position: absolute;
  top: 42%;
  left: 50%;
  margin-left: -70px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px black, 0 0 0 5px rgba(95, 90, 62, 0.445),
    0 0 0 6px black, 0 0 0 7px rgba(95, 90, 62, 0.445), 0 0 0 8px black,
    0 0 0 9px rgba(95, 90, 62, 0.445), 0 0 0 10px black,
    0 0 0 11px rgba(95, 90, 62, 0.445), 0 0 0 12px black,
    0 0 0 13px rgba(95, 90, 62, 0.445), 0 0 0 14px black,
    0 0 0 15px rgba(95, 90, 62, 0.445), 0 0 0 16px black,
    0 0 0 17px rgba(95, 90, 62, 0.445), 0 0 0 18px black,
    0 0 0 19px rgba(95, 90, 62, 0.445), 0 0 0 24px black,
    0 0 0 34px rgba(201, 195, 195, 0.24);
}
.cont .img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: 0.08s linear;
}
/* 歌曲名及作者名 */
/* .songname {
  position: absolute;
  top: 244px;
  left: 0;
  height: 20px;
  text-align: center;
  width: 100%;
} */
/* .songname h2 {
  font-weight: 700;
  font-size: 18px;
  width: 60%;
  margin: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
} */
/* 歌词模块 */
.lyricList {
  position: absolute;
  top: 47%;
  text-align: center;
  width: 100%;
  height: 25%;
  overflow: hidden;
}

.lyricList ul {
  position: absolute;
  width: 100%;
  top: -63px;
  transition: 0.22s linear;
}
.lyricList ul li {
  height: 21px;
  width: 90%;
  margin: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 歌词激活样式 */
.active {
  color: rgb(255, 0, 0);
  text-shadow: 0 0 0.5px rgba(8, 8, 8, 0.829);
}
/* 滑动条 */
.slider {
  display: flex;
  position: absolute;
  bottom: 18%;
  width: 100%;
  justify-content: space-between;
  left: 0;
}
.slider span {
  width: 15%;
  text-align: center;
}
.van-slider {
  width: 68%;
  margin: auto;
}
/* 底部控件 */
.controls {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 16%;
}
.foot {
  display: flex;
  justify-content: space-between;
  margin: auto;
  width: 80%;
  font-size: 42px;
  padding: 20px 5px;
}
</style>
